<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .images {
    position: relative;
    display: flex;
  }

  .images img {
    height: 100vh;
  }

  .loading {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background-color: black;
    z-index: 99;
    width: 0%;
  }
</style>

<body>
  <div class="loading"></div>
  <div class="images" style="opacity: 0;">
    <img src="https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka1.jpg" alt="">
    <img src="https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka2.jpg" alt="">
    <img src="https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka3.jpg" alt="">
    <img src="https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka4.jpg" alt="">
    <img src="https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka5.jpg" alt="">
    <img src="https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka6.jpg" alt="">
  </div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>

  function loading() {
    let imgarrs = ['https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka1.jpg',
      'https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka2.jpg',
      'https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka3.jpg',
      'https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka4.jpg',
      'https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka5.jpg',
      'https://ls360-uat.oss-cn-hangzhou.aliyuncs.com/images/kukagrowup/kuka6.jpg']
    let count = 0;
    let bl = 100 / imgarrs.length

    for (let i = 0; i <= imgarrs.length; i++) {
      var img = new Image()
      img.src = imgarrs[i]
      img.onload = function () {
        img.onload = null
        count++
        console.log(count);
        num = (count * bl).toFixed()
        $('.loading').width(num + '%').html(num + '%')
        if (num >= 100) {
          setTimeout(function () {
            $('.loading').fadeOut()
            $('.images').css({ 'opacity': '1' })
          })
        }
      }
      img.onerror = function () { }
    }
  }
  loading()
</script>

</html>